import React, { useState } from 'react';
import { Form, Input, Button, message, Switch } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '../../contexts/ThemeContext';
import './index.css';

interface LoginForm {
  username: string;
  password: string;
}

const Login: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const { isDarkMode, isEnglish, toggleTheme, toggleLanguage } = useTheme();

  const onFinish = (values: LoginForm) => {
    setLoading(true);
    // 模拟登录验证
    if ((values.username === 'admin' || values.username === '13522668899') && values.password === '123456') {
      const token = 'mock-token-' + Date.now();
      localStorage.setItem('token', token);
      localStorage.setItem('userRole', values.username === 'admin' ? 'admin' : 'user');
      message.success(isEnglish ? 'Login successful!' : '登录成功！');
      navigate('/dashboard');
    } else {
      message.error(isEnglish ? 'Invalid username or password!' : '用户名或密码错误！');
    }
    setLoading(false);
  };

  return (
    <div className="login-container">
      <div className="login-form">
        <div className="login-header">
          <h2>{isEnglish ? 'System Login' : '系统登录'}</h2>
          <div className="login-switches">
            <div className="theme-switch">
              <span>{isEnglish ? 'Theme: ' : '主题：'}</span>
              <Switch
                checkedChildren="🌙"
                unCheckedChildren="☀️"
                checked={isDarkMode}
                onChange={toggleTheme}
              />
            </div>
            <div className="language-switch">
              <span>{isEnglish ? 'Language: ' : '语言：'}</span>
              <Switch
                checkedChildren="EN"
                unCheckedChildren="中"
                checked={isEnglish}
                onChange={toggleLanguage}
              />
            </div>
          </div>
        </div>
        <Form
          name="login"
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: isEnglish ? 'Please input your username!' : '请输入用户名！' }]}
          >
            <Input prefix={<UserOutlined />} placeholder={isEnglish ? 'Username' : '用户名'} />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: isEnglish ? 'Please input your password!' : '请输入密码！' }]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder={isEnglish ? 'Password' : '密码'} />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} block>
              {isEnglish ? 'Login' : '登录'}
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login; 